<script setup lang="ts">
  import { ref } from 'vue'
  import ReturnFactoryField from './custom-field/Index.vue'
  import InspectField from './inspect-custom-field/Index.vue'
  import { ElTabs, ElTabPane } from 'element-plus'

  defineOptions({
    name: 'CustomFieldReturnFactoryTabs',
  })

  const activeTabName = ref<'returnFactoryField' | 'inspectReportField'>('returnFactoryField')
  const inspectFieldInstance = ref<InstanceType<typeof InspectField> | null>(null)
  const returnFactoryFieldInstance = ref<InstanceType<typeof ReturnFactoryField> | null>(null)

  const getList = () => {
    if (activeTabName.value === 'returnFactoryField') {
      if (returnFactoryFieldInstance.value) {
        returnFactoryFieldInstance.value.getList()
      }
    }

    if (activeTabName.value === 'inspectReportField') {
      if (inspectFieldInstance.value) {
        inspectFieldInstance.value.getList()
      }
    }
  }

  defineExpose({ getList })
</script>

<template>
  <div class="custom-field-return-factory-tabs">
    <el-tabs v-model="activeTabName" @tab-change="getList">
      <el-tab-pane label="返厂字段" name="returnFactoryField">
        <return-factory-field ref="returnFactoryFieldInstance"></return-factory-field>
      </el-tab-pane>
      <el-tab-pane label="检测报告字段" name="inspectReportField">
        <inspect-field ref="inspectFieldInstance"></inspect-field>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
  .custom-field-return-factory-tabs {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 12px 12px 12px;

    :deep(.el-tabs) {
      width: 100%;
      height: 100%;

      .el-tabs__content {
        flex: 1;
        height: 0;

        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
</style>
